<template>
  <div
    style="display: flex; justify-content: space-between; align-items: center"
  >
    <div style="display: flex; align-items: center">
      <img src="@/assets/logo.png" alt="Logo" class="logo" />
      <span class="logoname">集合号</span>
    </div>

    <div style="display: flex; align-items: center">
      <span>容量：</span>
      <el-progress
        style="width: 200px; margin-right: 10px"
        :text-inside="true"
        :stroke-width="20"
        :percentage="
          Math.floor(
            (useUserStore().UserInfo.userSpace /
              useUserStore().UserInfo.totalSpace) *
              100
          )
        "
      >
        <span style="color: black; font-size: 12px">{{
          Math.floor(useUserStore().UserInfo.userSpace / 1024) +
          'MB/' +
          Math.floor(useUserStore().UserInfo.totalSpace / 1024) +
          'MB'
        }}</span>
      </el-progress>
      <svg
        class="icon"
        aria-hidden="true"
        v-if="useUserStore().UserInfo.levelName === 'vip'"
        @click="openVIP"
      >
        <use xlink:href="#icon-vip"></use>
      </svg>

      <el-button
        @click="openVIP"
        type="warning"
        round
        v-else-if="useUserStore().UserInfo.levelName === 'user'"
        >开通会员</el-button
      >
      <svg
        style="font-size: 30px"
        class="icon"
        aria-hidden="true"
        v-else-if="useUserStore().UserInfo.levelName === 'svip'"
        @click="openVIP"
      >
        <use xlink:href="#icon-svip1"></use>
      </svg>
      <el-switch
        @change="darkHandlen"
        v-model="darkValue"
        style="margin: 0 5px"
        :active-action-icon="Sunny"
        :inactive-action-icon="MoonNight"
        class="switch"
        size="large"
      />
      <el-dropdown @command="handleCommand">
        <span
          style="
            display: flex;
            align-items: center;
            padding: 0 10px;
            min-width: 100px;
          "
        >
          <!-- 头像 -->
          <el-avatar
            :src="
              userStore.getUserInfo().avatar ||
              'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
            "
          />
          <!-- 名称 -->
          <span
            style="
              width: 90px;
              margin-left: 10px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            "
          >
            {{ userStore.getUserInfo().userName || '未登录' }}
          </span>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="SettingPerson" :icon="Avatar">
              <span>个人主页</span>
            </el-dropdown-item>
            <el-dropdown-item :icon="Download">
              <span>客户端下载</span>
            </el-dropdown-item>
            <el-dropdown-item :icon="ChatRound">
              <span>系统通知</span>
            </el-dropdown-item>
            <!-- 退出系统 -->
            <el-dropdown-item command="outTo" divided :icon="SwitchButton">
              <span>安全退出</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
  <el-dialog v-model="dialogVisible" width="30%" align-center>
    <template #header>
      <span>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-svip"></use>
        </svg>
      </span>
    </template>
    <h3>会员等级：</h3>
    <el-radio-group
      v-model="radioVIP"
      style="width: 100%; display: flex; justify-content: center"
    >
      <el-radio :label="2">vip</el-radio>
      <el-radio :label="3">svip</el-radio>
    </el-radio-group>
    <h3>选择时长：</h3>
    <el-radio-group
      v-model="radioTime"
      style="width: 100%; display: flex; justify-content: center"
    >
      <el-radio :label="0">1个月</el-radio>
      <el-radio :label="1" disabled>6个月</el-radio>
    </el-radio-group>
    <template #footer>
      <div style="width: 100%; display: flex; justify-content: center">
        <el-button type="success" @click="buyVIP">确定开通</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { useRouter } from 'vue-router'
import { useUserStore, useTokenStore } from '@/stores/index'

import { ref } from 'vue'
import { getUserInfo, logout } from '@/request/usr'
import { ElNotification, ElMessageBox } from 'element-plus'
import {
  MoonNight,
  Sunny,
  SwitchButton,
  Avatar,
  Download,
  ChatRound
} from '@element-plus/icons-vue'
import { memberPayService, memberOrderService } from '@/request/common'
const userStore = useUserStore()
const tokenStore = useTokenStore()
//主题开关
const darkValue = ref(true)
const dark = document.querySelector('html')
const darkHandlen = () => {
  dark.classList.contains('dark')
    ? dark.classList.remove('dark')
    : dark.classList.add('dark')
}
// 退出路由和提示
const router = useRouter()

//下拉选项
const handleCommand = (command) => {
  if (command === 'outTo') {
    // 注销token
    ElMessageBox.confirm('确定要退出系统吗', 'Warning ! !', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(() => {
        logout().then(() => {
          userStore.removeUserInfo()
          tokenStore.removeToken()
          localStorage.removeItem('filePid')
          router.push({
            path: '/login'
          })
        })
      })
      .catch(() => {})
  } else if (command === 'SettingPerson') {
    router.push({
      path: '/SettingPerson'
    })
  }
}

//vip
const dialogVisible = ref(false)
const radioVIP = ref(2)
const radioTime = ref(0)
const openVIP = () => {
  dialogVisible.value = true
}
const buyVIP = () => {
  memberPayService(radioVIP.value, useUserStore().UserInfo.userId).then(
    (res) => {
      // @ts-ignore
      if (res.code == 200) {
        const orderId = res.data.orderId
        memberOrderService(radioVIP.value).then((res) => {
          dialogVisible.value = false
          ElMessageBox.alert(`请支付${res.data.levelMoney}元`, '支付', {
            confirmButtonText: '确认支付',
            callback: () => {
              // 支付成功
              window.open(
                'http://121.37.211.41:10010/alipay/pay?subject=' +
                  res.data.levelName +
                  '&traceNo=' +
                  orderId +
                  '&totalAmount=' +
                  res.data.levelMoney
              )
              ElNotification({
                message: '支付成功',
                type: 'success',
                duration: 0,
                onClose: () => {
                  // 刷新
                  getUserInfo(useUserStore().UserInfo.userId).then((res) => {
                    userStore.setUserInfo(res)
                  })
                }
              })
            }
          })
        })
      }
    }
  )
}
</script>

<style lang="scss" scoped>
.el-dropdown:focus-visible {
  outline: none;
}
.logo {
  line-height: 56px;
  height: var(--head-height);
  // box-shadow: 5px 5px 5px slategray;
  filter: drop-shadow(5px 5px 5px rgb(186, 186, 186));
}

.logoname {
  color: rgb(101, 101, 101);
  font-size: 30px;
  text-shadow: 2px 2px 5px rgb(186, 186, 186);
  font-weight: bolder;
}
.promotion-text {
  color: red;
}
.col {
  height: 58px;
  display: flex;
  align-items: center;
  // min-width: 9%;
  // justify-content: space-around;
  justify-content: right;
}

// @media screen and (max-width: 930px) {
//   /* 在屏幕宽度小于或等于600px时应用的样式 */
//   .logoname {
//     font-size: 20px;
//   }
//   .logo {
//     height: 35px;
//   }
//   .userPay {
//     font-size: 10px;
//   }
//   .system-button {
//     display: none;
//   }
// }
@media screen and (max-width: 600px) {
  .promotion-text {
    display: none;
  }
}
</style>
